<template>
  <div class="login">
    <div class="xuhua" :style="imgUrl"></div>
    <div class="mid">
      <el-row class="row">
        <el-col :span="12">
          <div class="left">
            <!-- logo -->
            <div id="logobox">
              <el-row>
                <el-col :push="1">
                  <div id="logo" :style="logoUrl"></div>
                </el-col>
              </el-row>
            </div>
            <!-- text -->
            <div id="textbox">
              <el-row style="padding-top:5%">
                <el-col :push="1">
                  <h1>欢迎登录</h1>
                </el-col>
              </el-row>
              <el-row>
                <el-col :push="1">
                  <p>餐饮管理系统</p>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="right">
            <div id="loginForm">
              <el-row>
                <el-col :span="6" :push="2">
                  <label for>账号：</label>
                </el-col>
                <el-col :span="12">
                  <el-input v-model="form.name" placeholder="请输入账号"></el-input>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :push="2">
                  <label for>密码：</label>
                </el-col>
                <el-col :span="12">
                  <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
                </el-col>
              </el-row>
              <el-row style="padding-top:2%">
                <el-col :span="6" :push="2">
                  <el-button type="primary" @click="userLogin">登录</el-button>
                </el-col>
              </el-row>
              <el-row>
               <el-col :span="24" :push="2">服务员: waiter</el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :push="2">会计: account</el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :push="2">管理员: admin</el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :push="2">超级管理员: sAdmin</el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :push="2">统一密码: 123</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "login",
  data() {
    return {
      //背景图
      imgUrl: {
        backgroundImage: "url(" + require("../assets/beijin2.jpg") + ")",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat"
      },
      //logo图片
      logoUrl: {
        backgroundImage: "url(" + require("../assets/logo5.jpg") + ")",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center center"
      },
      //账号密码
      form: {
        name: "",
        password: ""
      }
    };
  },
  methods: {
    ...mapActions(["loginAct"]),
    userLogin() {
      let user = {
        name: this.form.name,
        password: this.form.password
      };
      // console.log(user)
      // JSON.stringify(user)
      if (user.name && user.password) {
        //在这根据返回信息的身份 跳转路由
        this.loginAct(user).then(res => {
          console.log(sessionStorage.getItem("type"));
          if (res == 200) {
            sessionStorage.getItem("type") == 1
              ? this.$router.push("/qindex")
              : this.$router.push("/hindex/cpSet");
          } else {
            this.$message({
              type: "warning",
              message: "账号或密码错误!"
            });
          }
        });
      } else {
        this.$message({
          message: "请输入完整用户名和密码",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style scoped lang="less">
.xuhua {
  //背景虚化
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(3px);
}
.login {
  width: 100%;
  height: 100%;
  .mid {
    width: 50%;
    height: 70%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    .row {
      height: 100%;
      .el-col {
        height: 100%;
        .left {
          width: 100%;
          height: 100%;
          background-color: rgba(58, 58, 59, 0.8);
          #logobox {
            height: 30%;
            // border: 1px solid red;
            padding-top: 2%;
            .el-row {
              height: 100%;
            }
            #logo {
              width: 40%;
              height: 100%;
              border-radius: 50%;
              // border: 1px solid red;
            }
            .text {
              width: 30%;
              height: 30%;
              // border: 1px solid red;
            }
          }
          #textbox {
            height: 30%;
            // border: 1px solid red;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            color: rgb(226, 219, 219);
            h1 {
              margin: 0;
            }
            p {
              margin-top: 1%;
            }
          }
        }
        .right {
          width: 100%;
          height: 100%;
          background-color: rgba(243, 242, 242, 0.9);
          position: relative;
          #loginForm {
            //登录部分
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 30%;
            // border: 1px solid red;
            .el-row {
              line-height: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
